Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: onMount prop conflict with ReactMonacoEditor component #359

Merged
merged 1 commit into from
Nov 21, 2024

Conversation

cristianoventura
Copy link
Collaborator

Description

This PR fixes a bug that was introduced in #355 and caused the instance of the Monaco Editor in the "Script Preview" tab to show with no content after the first render.

How to Test

  • Open the Script Preview tab
  • Check that the script is properly generated
  • Switch to a different generator
  • Check that the Script Preview tab contains the correct script

Checklist

  • I have performed a self-review of my code.
  • I have added tests for my changes.
  • I have run linter locally (npm run lint) and all checks pass.
  • I have run tests locally (npm test) and all tests pass.
  • I have commented on my code, particularly in hard-to-understand areas.

Screenshots (if appropriate):

Related PR(s)/Issue(s)

@cristianoventura cristianoventura self-assigned this Nov 21, 2024
@cristianoventura cristianoventura requested a review from a team as a code owner November 21, 2024 20:14
@cristianoventura cristianoventura requested review from going-confetti and Llandy3d and removed request for a team November 21, 2024 20:14
@@ -71,7 +82,7 @@ export function ReactMonacoEditor({
...props.options,
wordWrap: toolbarState.wordWrap,
}}
onMount={(editor) => setEditor(editor)}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was overriding the onMount prop declared in the CodeEditor component:

useEffect(() => {
if (!editor) return
const position = editor.getPosition()
editor.setValue(value)
if (position) {
editor.setPosition(position)
}
}, [editor, value])
const handleEditorMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
setEditor(editor)
}
return (
<ReactMonacoEditor
showToolbar
defaultLanguage="javascript"
options={{ readOnly }}
defaultValue={value}
onChange={onChange}
onMount={handleEditorMount}

This prevented the content of script preview from being set.

Comment on lines +65 to +67
if (props.onMount) {
props.onMount(editor, monaco)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now we're setting the instance of editor here but still respecting what the parent component is doing.

Copy link
Member

@Llandy3d Llandy3d left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@cristianoventura cristianoventura merged commit 5faa040 into main Nov 21, 2024
2 checks passed
@cristianoventura cristianoventura deleted the fix/onmount-prop-conflict-monaco branch November 21, 2024 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants